<html xmlns:th="http://www.thymeleaf.org">
<form id="add_interface_form" class="form-horizontal form-validate floating-label" role="form" novalidate="novalidate">
    <div class="card-body card-padding">
        <div class="form-group">
            <label for="interfaceName" class="col-sm-3 control-label">接口名称</label>
            <div class="col-sm-9">
                <input type="text" name="interfaceName" required="required" aria-required="true"
                       class="form-control input-sm" id="interfaceName" placeholder="接口名称"
                       aria-describedby="interfaceName-error"
                />
            </div>
        </div>
        <div class="form-group">
            <label for="interfaceName" class="col-sm-3 control-label">接口所属分类</label>
            <div class="col-sm-9">
                <div class="select">
                    <select class="form-control" name="interfaceCategory" id="categoryId">
                        <option value="">请选择</option>
                        <option th:each="category:${categoryList}" th:value="${category.interfaceCategoryId}" th:text="${category.categoryName}"></option>
                    </select>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label for="interfaceName" class="col-sm-3 control-label">接口地址</label>
            <div class="col-sm-9">
                <input type="text" name="interfaceUrl" class="form-control input-sm" id="interfaceUrl" placeholder="接口地址"/>
            </div>
        </div>
        <div class="form-group">
            <label for="interfaceDesc" class="col-sm-3 control-label">接口参数</label>
            <div class="col-sm-9">
                <div id="interfaceParamType">
                    <label class="inline interfaceParamType">
                        <div class="col-sm-4" style="padding-left: 0px;"><input name="paramName" class="form-control" placeholder="参数名称"/></div>
                        <div class="col-sm-5" style="padding-left: 0px;"><input name="paramDesc" class="form-control" placeholder="参数描述"/></div>
                        <button type="button" onclick="removeInterfaceParam(this)" class="btn btn-default btn-icon waves-effect waves-circle waves-float">
                            <i class="zmdi zmdi-minus-circle-outline zmdi-hc-fw"></i>
                        </button>
                    </label>
                </div>
                <button type="button" onclick="addInterfaceParam('interfaceParamType')" class="btn btn-default btn-icon waves-effect waves-circle waves-float">
                    <i class="zmdi zmdi-plus-circle-o zmdi-hc-fw"></i>
                </button>
                <input type="hidden" name="interfaceParam" id="add_interfaceParam"/>
            </div>
        </div>
        <div class="form-group">
            <label for="interfaceDesc" class="col-sm-3 control-label">接口参数JSON样例</label>
            <div class="col-sm-9">
                <textarea class="form-control" id="interfaceDesc" name="interfaceDesc" rows="4" placeholder="接口参数JSON样例"></textarea>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">状态</label>
            <div class="col-sm-9">
                <label class="radio radio-inline m-r-20">
                    <input type="radio" name="isValid" value="1" checked="checked"/>
                    <i class="input-helper"></i>
                    启用
                </label>
                <label class="radio radio-inline m-r-20">
                    <input type="radio" name="isValid" value="0"/>
                    <i class="input-helper"></i>
                    禁用
                </label>
            </div>
        </div>
        <input type="hidden" name="method" value="save"/>
        <input type="hidden" name="interfaceId" value=""/>
    </div>
</form>
</html>
<script>
    $(function () {
        $('#add_interface_form').bootstrapValidator({
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                interfaceName: {
                    validators: {
                        notEmpty: {
                            message: '接口名称不能为空'
                        }
                    }
                },
                interfaceCategory: {
                    validators: {
                        notEmpty: {
                            message: '所属分类不能为空'
                        }
                    }
                },
                interfaceUrl: {
                    validators: {
                        notEmpty: {
                            message: '接口地址不能为空'
                        }
                    }
                },
                interfaceParam: {
                    validators: {
                        notEmpty: {
                            message: '接口参数JSON字符串不能为空'
                        }
                    }
                }
            }
        }).on('success.form.bv', function (e) {
            $("#add_interface_form").ajaxSubmit({
                type: "post",  //提交方式
                dataType: "json", //数据类型
                url: "/interface/saveInterface",
                success: function (data) {
                    alert(data.reason);
                    if(data.ok){
                        $("#addInterfaceModelContent").html("");
                        $("#addInterfaceModel").modal("hide");
                        $("#data-table-interface").bootgrid("reload");
                    }
                }
            })

        });
    })
</script>